/*
 * 下拉菜单
 * 调用方式:
 *
 * let dorpDownList=['sdf','sdfsdfsdfsdfsd','ffffffff'];
 *  <div className="TestProcessBar">
 <ReProcessBar process="80"></ReProcessBar>
 </div>
 * 宽度自适应最外层宽度
 * */

'use strict';
var React = require('react');
class ReDropDownList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            active: -1,
            title: props.title,
            show: false
        };
        this.renderList = this.renderList.bind(this);
        this.changeActive = this.changeActive.bind(this);
        this.getUlClass = this.getUlClass.bind(this);
        this.mouseOver = this.mouseOver.bind(this);
        this.mouseOut = this.mouseOut.bind(this);
        this.getMainClass=this.getMainClass.bind(this);
    }

    changeActive(i, item) {
        this.setState({
            active: i,
            title: item,
            show: false
        });
    }


    mouseOver(e) {
        this.setState({
            show: true
        });
        /*var s = this.refs.ReDropDownListDom;
        if (document.all) {    //判断浏览器是否为IE,如果存在document.all则为IE
            if (!e.srcElement.contains(s)) {    // 判断调用onmouseover的对象(this)是否包含自身或子级，如果包含，则不执行
                console.log('in1');
                this.setState({
                    show: true
                });
            }
        } else {    //标准浏览器下的方法
            var reg = e.target.compareDocumentPosition(s);
            console.log(reg);
            if (!(reg == 10 || reg == 0)) {
                console.log('in2');
                this.setState({
                    show: true
                });
            }
        }*/
    }


    mouseOut(e) {
           /* console.log('out');
            this.setState({
                show: false
            });
        */
        var location=e.toElement||e.relatedTarget;
        var s = this.refs.ReDropDownListDom;
        if (document.all) {
            if (!s.contains(location)) {
                this.setState({
                    show: false
                });
            }
        } else {
            //最终目的dom在控件内部时不触发
            var reg = location.compareDocumentPosition(s);
            if ((reg != 10 )) {
                this.setState({
                    show: false
                });
            }
        }
    }

    getUlClass() {
        if (this.state.show) {
            return 'ReDropDownList_Content';
        }
        else {
            return 'ReDropDownList_Content ReDropDownList_Hide';
        }
    }

    getMainClass(){
        if(this.props.reClass!=undefined){
            return "ReDropDownList "+this.props.reClass;
        }
        else{
            return "ReDropDownList";
        }
    }

    renderList() {
        return this.props.list.map((item, i) => {
            var renderItem = <li key={"ReDropDownItem"+i} onClick={this.changeActive.bind(this,i,item)}><a
                href="javascript:void(0)">{item}</a></li>;
            return renderItem;
        })
    }

    render() {
        return (<div ref="ReDropDownListDom" className={this.getMainClass()} value={this.state.active} onMouseOver={this.mouseOver}
                     onMouseOut={this.mouseOut}>
            <div className="ReDropDownList_Title">
                <a href="javascript:void(0)">{this.state.title}</a>
            </div>
            <ul className={this.getUlClass()}>
                {this.renderList()}
            </ul>
        </div>)
    }
}

module.exports = ReDropDownList;